<template>
  <div class="modify">
    <el-header>
        <div class="system">
          <div style="padding:10px 20px 0 0">
            <img style="width:40px; height:40px;border-radius:50%" src="http://img.impart365.com/J0000C3506062FBF7EA" alt="">
          </div>
          <span>智羚后台系统</span>
        </div>
        <el-dropdown class="user">
          <span class="el-dropdown-link">
            欢迎:{{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logOut()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <div class="main">
        <el-button @click="back()" class="back-btn" type="info">返回</el-button>
        <div class="modifyPsw">
          <div class="content">
            <h3 style="text-align:center ;padding-bottom:30px">智羚后台系统密码修改</h3>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <!-- <el-form-item label="用户名:" prop="uname">
                <el-input v-model.number="ruleForm.uname"></el-input>
              </el-form-item> -->
              <el-form-item label="密码:" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
// import { apiModifyPwd } from '../request/api'
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      userName: '',
      ruleForm: {
        pass: '',
        checkPass: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.userName = sessionStorage.getItem('userName')
    // console.log(this.userName)
  },
  methods: {
    // 返回上一步
    back(){
      this.$router.go(-1)
    },
    // 退出登录
    logOut () {
      sessionStorage.removeItem('token')
      sessionStorage.removeItem('userId')
      sessionStorage.removeItem('role')
      sessionStorage.removeItem('userName')
      this.$router.push('/login')
      // console.log(sessionStorage.getItem('data'))
    },

    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(valid)
          // console.log(this.ruleForm.checkPass)
          // console.log(this.$md5(this.ruleForm.checkPass))
          apiModifyPwd({ password: this.$md5(this.ruleForm.checkPass) }).then(res => {
          // 获取数据成功后的其他操作
            // console.log(res)
            if (res.code === 0) {
              this.$message({
                message: '密码修改成功',
                type: 'success'
              })
              sessionStorage.removeItem('token')
              sessionStorage.removeItem('userId')
              sessionStorage.removeItem('role')
              sessionStorage.removeItem('userName')
              this.$router.push('/login')
            } else {
              this.$message.error('修改失败')
            }
          })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.modify{
  background-color: #F2F6FC;
}
.modify .el-header{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    line-height: 60px;
    border-bottom: 1px solid #DCDFE6;
  }
  .modify .system{
    padding-left:60px;
    color:#909399;
    font-size: 14px;
    display: flex;
  }
  .modify .user{
    margin-right:60px
  }
  .modify .el-dropdown{
    cursor: pointer;
  }
  /* main */
  .modify .main{
    position: relative;
    background-color: #F2F6FC;
    height: calc(100vh - 60px);
  }
  .modify .back-btn{
    float:right;margin:30px 50px 0 0
  }
  .modify .modifyPsw{
    width:43%;
    height:500px;
    background:#fff;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    border:1px solid #DCDFE6;
    position: relative;
  }
  .modify .content{
    padding-top:50px;
    width:80%;
    height:400px;
    position: absolute;
    top:50%;
    left:45%;
    transform: translate(-50%,-50%);
  }
</style>
